<template>
  <BaseCard title="当日活跃用户与访问量" :height="height">
    <template #right>
      <VptSelectBlock
        :defaultSelect="moduleUserValue"
        :tabList="moduleOption"
        @changeTab="moduleChangeUserTab"
        :fontSize="'0.14rem'"
        :height="'0.24rem'"
      ></VptSelectBlock>
      <VptSelectBlock
        :defaultSelect="userValue"
        :tabList="option"
        @changeTab="changeUserTab"
      ></VptSelectBlock>
    </template>
    <VptLine
      v-bind="chartProps"
      :grid="grid"
      :dataZoom="dataZoom"
      :autoRander="false"
      :xAxisInterval="240"
      :smooth="true"
      :chartType="chartType"
    >
    </VptLine>
  </BaseCard>
</template>

<script setup>
//当日活跃用户与访问量
import { fontSize } from "@/utils/rem/rem.js";
import { computed, ref } from "vue";
import BaseCard from "@/components/vpt-cards-1001/index.vue";
import VptLine from "@/components/echarts/vpt-line/index.vue";
import VptSelectBlock from "@/components/form/vpt-select-block/index.vue";

const props = defineProps({
  height: { type: String, default: "6.2rem" },
  moduleUserValue: { type: String, default: "01" },
  userValue: { type: String, default: "01" },
  chartData: { type: Object, default: () => { } },
  chartType: { type: String, default: "init" },
});

const grid = {
  //   top: fontSize(100),
  bottom: fontSize(20),
};

const dataZoom = {
  silent: true,
  show: true,
  type: "slider",
  start: 0,
  end: 100,
  bottom: 10,
  height: 1,
  handleSize: "1000%",
  handleStyle: {
    color: "#838B97",
    shadowColor: "#838B97",
  },
  textStyle: {
    color: "#fff",
  },
  borderColor: "red",
  backgroundColor: "#838B97",
  fillerColor: "#838B97",
  dataBackgroundColor: {
    lineStyle: { color: "#318a2f" },
    areaStyle: {
      shadowBlur: 10,
    },
  },
  brushStyle: { shadowColor: "#838B97" },
};

const moduleOption = [
  { id: "01", name: "按模块" },
  { id: "02", name: "按区划" },
];

const option = [
  { id: "01", name: "在线用户数" },
  { id: "02", name: "访问人次" },
];
// const color = [
//   "#165DFF",
//   "#1AC6FF",
//   "#00b42a",
//   "#ffc400",
//   "#FF7D00",
//   "#7442D4",
//   "#F14BA4",
//   "#D46666",
// ];
const chartProps = computed(() => {
  let store = {
    height: "100%",
    chartData: props.chartData.value || [],
    xAxisData: props.chartData.xData || [],
    legendData: props.chartData.legendData || [],
    splitNumber: 4,
    legendProps: {
      // orient: "verticalAlign",
      top: fontSize(0),
      // itemGap: fontSize(20),
    },
    xAxisFontSize: 14,
    yAxisFontSize: 14,
    legendTopSize: 10,
    itemGapFontSize: 14,
    legendTextStyleFontSize: 14,
    grid: {
      top: fontSize(40),
    },
  };
  return store;
});

const moduleChangeUserTab = (item) => {
  // moduleUserValue.value = item.id;
  emit("changeModuleTab", item.id);
};

const changeUserTab = (item) => {
  // userValue.value = item.id;
  emit("changeUserTab", item.id);
};

const emit = defineEmits(["changeModuleTab", "changeUserTab"]);
</script>